<template>
  <div>
    <div
      class="Opacity"
      v-show="state2"
      @click="
        state2 = !state2;
        state1 = !state1;
      "
    ></div>
    <div class="divBox">
      <div style="width: 100%"><h1 style="margin: 1% 1%">用户面板</h1></div>
      <div class="Divleft">
        <div class="attend">
          <div class="buddhaDiv">
            <div class="touxiang">
              <img
                src="../../assets/begc.jpg"
                alt=""
                style="width: 100px; height: 100px; border-radius: 50%"
              />
            </div>
            <ul>
              <li>盖茨</li>
              <li>院长(总医院)</li>
              <hr />
              <li>
                <span>我的消息</span>
                <span>1</span>
              </li>
              <hr />
              <li>
                <span> 我的邮件</span>
                <span>0</span>
              </li>
              <hr />
              <li>
                <a
                  href="#"
                  class="iconfont icon-bianxie"
                  title="写便签"
                  @click="
                    state1 = !state1;
                    state2 = !state2;
                  "
                  >写便签</a
                >
              </li>
            </ul>
          </div>
        </div>
        <div class="infra">
          <ul>
            <li style="font-size: 20px">
              <div style="font-weight: normal">基本资料</div>
            </li>
            <li>
              <div>
                <span class="iconfont icon-xueli">学历</span>
                <p>哈弗大学 本科</p>
              </div>
            </li>
            <li>
              <div>
                <span class="iconfont icon-dianhuatianchong">手机</span>
                <p>13800138000</p>
              </div>
            </li>
            <li>
              <div>
                <span class="iconfont icon-weizhi">地址</span>
                <p>广东省广州市天河区</p>
              </div>
            </li>
            <li>
              <div>
                <span class="iconfont icon-qianming">签名</span>
                <p>天生我材必有用</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="Divright">
        <el-tabs type="border-card" value="2">
          <el-tab-pane label="用户管理" name="1">
            <stikynot> </stikynot>
          </el-tab-pane>
          <el-tab-pane label="个人设置" name="2">
            <touxiang></touxiang>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <div class="Notebox" v-show="state1">
      <span
        class="iconfont icon-untitled96"
        @click="
          state1 = !state1;
          state2 = !state2;
        "
      ></span>
      <div>
        <el-input placeholder="标题   (选填)" v-model="Data.biaoti"></el-input>
        <textarea cols="60" rows="10" placeholder="内容 (必填)"></textarea>
        <el-button type="primary" @click="confirm">确定</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import stikynot from "../../components/Supplierss/stikynot.vue";
import touxiang from "../../components/Supplierss/Infos.vue";
export default {
  data() {
    return {
      form: [],
      Data: [{ biaoti: "" }],
      //写便签开关
      state1: false,
      //遮盖层开关
      state2: false,
    };
  },
  components: { stikynot, touxiang },
  methods: {
    //写便签确定事件
    confirm() {
      this.state1 = !this.state1;
      this.state2 = !this.state2;
    },
  },
};
</script>

<style scoped lang="less">
body {
  width: 100%;
  height: 100%;
}
.Notebox {
  width: 496px;
  height: 320px;
  position: absolute;
  left: 50%;
  top: 20%;
  transform: translate(-50%);
  border: 1px solid red;
  background-color: #f9f9f9;
  z-index: 4;
  .iconfont {
    font-size: 25px;
    position: absolute;
    top: -4%;
    left: 98%;
    cursor: pointer;
  }
  div {
    margin: 0 25px;
    width: 95%;
    .el-input {
      margin: 30px 0px 20px 0px;
    }
    .el-button {
      float: right;
      margin-right: 4%;
      margin-top: 3%;
    }
  }
}
.divBox {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-wrap: wrap;
  margin: 0 auto;
  width: 98%;
  height: 1350px;
  // border: 1px solid red;
  .touxiang {
    // border: 1px solid red;
    text-align: center;
  }
  //左边部分
  .Divleft {
    border-top: 4px solid #208adb;
    width: 25%;
    height: 80%;
    border: 1px solid blue;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    //左边上部分
    .attend {
      height: 40%;
      width: 100%;
      border-top: 4px solid #208adb;
      .buddhaDiv {
        margin-top: 30px;
        width: 100%;
        ul > li {
          list-style: none;
        }
        ul {
          li:nth-child(1) {
            font-size: 25px;
            text-align: center;
          }
          li:nth-child(2) {
            font-size: 25px;
            text-align: center;
          }
          li:nth-child(4) {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            div,
            span {
              margin: 0px 2%;
              cursor: pointer;
            }
          }
          li:nth-child(6) {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            div,
            span {
              margin: 0px 2%;
              cursor: pointer;
            }
          }
          li:nth-child(8) {
            a {
              text-align: center;
              text-decoration: none;
              display: block;
              margin: 0 auto;
              width: 95%;
              height: 40px;
              border-radius: 5px;
              background-color: #208adb;
              color: #fff;
              font-weight: bold;
              line-height: 40px;
              margin-top: 30px;
            }
          }
        }

        hr {
          width: 95%;
          margin: 10px auto;
        }
      }
    }
    //左边下部分
    .infra {
      height: 55%;
      width: 100%;
      border: 1px solid green;
      margin-top: 2%;
      ul {
        width: 100%;
        height: 100%;
        li {
          width: 100%;
          height: 22%;
          border-top: 1px solid #eeeeee;
          list-style: none;
          div {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            margin-left: 4%;
            span {
              font-weight: bold;
            }
          }
        }
      }
      ul li:nth-of-type(1) {
        height: 12%;
        border-top: 4px solid #208adb;
      }
    }
  }
  //右边部分
  .Divright {
    width: 70%;
    height: 100%;
  }
}
//遮盖层
.Opacity {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: black;
  opacity: 0.6;
  z-index: 3;
}
</style>